<template>
	<view class="category-wrap" :data-theme="theme()" :class="theme() || ''">
		<!-- #ifdef APP-PLUS -->
		<header-bar></header-bar>
		<!-- #endif -->
		<!-- 搜索框 -->
		<block v-if="showType == 10 && style == 5">
			<!-- #ifndef H5 -->
			<view class="index-search-box-cate d-b-c style5Top" id="searchBox"
				:style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;padding-top:' + topBarTop() + 'px'"
				style="background-color: #fff !important;">
				<view class="index-search-cate flex-1 t-c bgbornone">
					<text class="tc flex-1 f34 gray3 fb">分类</text>
				</view>
			</view>
			<view class="height100 address-defalut-wrap" :style="'height:' + searchHeight + 'px' "></view>
			<!-- #endif -->
		</block>
		<block v-else>
			<view class="index-search-box-cate d-b-c" id="searchBox"
				:style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;padding-top:' + topBarTop() + 'px'">
				<view class="index-search-cate flex-1 t-c" @click="gotoSearch">
					<span class="icon iconfont icon-sousuo"></span>
					<text class="ml10">{{ searchName }}</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="wx-top-right"></view>
				<!-- #endif -->
			</view>
		</block>


		<template v-if="showType == 10 && style == 5">
			<view class="searchStyle5Box">
				<view class="searchStyle5">
					<view class="searchStyle5-flex" @click="gotoSearch">
						<view class="icon iconfont icon-sousuo"></view>
						<view class="ml10">{{ searchName }}</view>
						<view class="searchBot">搜索</view>
					</view>
				</view>
				<view class="selectorTop">
					<view class="selectorBox">
						<view class="d-f mb20">
							<view class="flex-1 selectorTitle">我为家乡代言</view>
							<view class="icon iconfont icon-jiantou " style="font-size: 24rpx;"></view>
						</view>
						<view class="d-f">
							<view class="flex-1">
								<picker @change="provinceChange" :value="provinceIndex" :range="province">
									<view class="selectorBox-box">{{province[provinceIndex]||'选择省'}}</view>
								</picker>
							</view>
							<view class="flex-1">
								<picker @change="cityChange" :value="cityIndex" :range="city"
									:disabled="provinceIndex?false:true" @click="onShowt(1)">
									<view class="selectorBox-box">{{city[cityIndex]||'选择市'}}</view>
								</picker>
							</view>
							<view class="flex-1">
								<picker @change="areaChange" :value="areaIndex" :range="area"
									:disabled="cityIndex?false:true" @click="onShowt(2)">
									<view class="selectorBox-box">{{area[areaIndex]||'选择区'}}</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<!--类别列表-->
		<view class="category-content">
			<!--一级分类 大图-->
			<view class="cotegory-type cotegory-type-1" v-if="showType == 10 && style == 3">
				<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
					<view class="list">
						<view class="item" v-for="(item, index) in listData" :key="index"
							@click="gotoList(item.categoryId)">
							<view class="pic">
								<image :src="hasImages(item)" mode="widthFix"></image>
							</view>
							<view class="p-20-0 tc f28">{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!--二级分类-->
			<template
				v-if="(showType == 20 && (style==1 || style==2 || style==3)) || (showType == 10 && (style == 1 || style == 2 || style == 4|| style == 5 ))">
				<view class="cotegory-type cotegory-type-3">
					<template v-if="showTwo()">
						<view class="category-tab f-s-0" :class="{'showShopping': isBuyFast()}">
							<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
								<template v-for="(item, index) in listData" :key="index">
									<view :class="selectIndex == index ? 'item active' : 'item'"
										@click="selectCategory(index)">
										<text>{{ item.name }}</text>
									</view>
								</template>
							</scroll-view>
						</view>
					</template>

					<template v-if="style == 5">
						<view class="category-tab f-s-0" :class="{'showShopping': isBuyFast()}">
							<scroll-view scroll-y="true" class="scroll-Y bg-white"
								:style="'height:' + scrollviewHigh + 'px;'" :scroll-top="scrollTop">
								<template v-for="(item, index) in listData" :key="index">
									<view
										:class="selectIndex == index ? 'item whiteImp active index-search-box-cate ' : 'item'"
										@click="selectCategory(index)">
										<text>{{ item.name }}</text>
									</view>
								</template>
							</scroll-view>
						</view>
					</template>

					<view class="category-tab f-s-0"
						v-if="(style == 1 && showType == 20) || (style == 4 && showType == 10)">
						<scroll-view scroll-y="true" class="scroll-Y" :class="{'showShopping': isBuyFast()}"
							:style="'height:' + scrollviewHigh + 'px;'">
							<view :class="selectIndex == index ? 'item active' : 'item'"
								v-for="(item, index) in listData" :key="index" @click="selectCategory(index)">
								<text>{{ item.name }}</text>
							</view>
						</scroll-view>
					</view>
					<!--二级分类 小图-->
					<view class="cotegory-type cotegory-type-2 flex-1" v-if="(style == 1 && showType == 20)">
						<scroll-view scroll-y="true" class="scroll-Y" :class="{'showShopping': isBuyFast()}"
							:style="'height:' + scrollviewHigh + 'px;'">
							<view class="list">
								<view class="item" v-for="(item, index) in childlist" :key="index"
									@click="gotoList(item.categoryId)">
									<image :src="hasImages(item)" mode="widthFix"></image>
									<text>{{ item.name }}</text>
								</view>
							</view>
						</scroll-view>
					</view>

					<!--一级分类 小图-->
					<view class="cotegory-type cotegory-type-2 flex-1" v-if="style == 1 && showType == 10">
						<scroll-view scroll-y="true" class="scroll-Y" :class="{'showShopping': isBuyFast()}"
							:style="'height:' + scrollviewHigh + 'px;'">
							<view class="list">
								<view class="item" v-for="(item, index) in listData" :key="index"
									@click="gotoList(item.categoryId)">
									<image :src="hasImages(item)" mode="widthFix"></image>
									<text>{{ item.name }}</text>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="category-content pr" v-if="style == 2 || style == 3 || style == 4  || style == 5">
						<scroll-view scroll-y="true" class="scroll-Y scroll-3"
							:style=" style == 5 ? 'height:' + (scrollviewHigh - 220)  + 'px;':'height:' + scrollviewHigh + 'px;'">
							<view class="catescroll2-top" v-if="showType == 20 && (style == 2 || style == 3)">
								<view @click="changeCategory(item.categoryId)" class="catescroll2-top-item"
									:class="{ active: item.categoryId == categoryId }"
									v-for="(item, index) in childlist" :key="index">
									{{ item.name }}
								</view>
							</view>
							<view class="product-item-wrap" :class="{'showShopping': isBuyFast()}" v-if="style != 5">
								<view class="product-item-2"
									@click="gotoPage('/pages/product/detail/detail?productId=' + item.productId)"
									v-for="(item, index) in productlist" :key="index">
									<image class="product-image-2" :src="item.productImage" mode=""></image>
									<view class="flex-1 d-c d-b-s" style="height: 154rpx;">
										<view class="text-ellipsis-2 f28 gray3">{{ item.productName }}</view>
										<view class="theme-price f36 fb ww100 price-wrap">
											<text class="f24">￥</text>
											{{ item.productPrice }}
											<template v-if="shoppingPrice && !item.seckill && isBuyFast()">
												<view class="add-shopping-wrap theme-bg"
													@click.stop="addShopping(item)">
													<view class="icon iconfont icon-icozhuanhuan"></view>
												</view>
											</template>
										</view>
									</view>
								</view>
							</view>
							<view class="product-item-wrap d-f f-w mt20" :class="{'showShopping': isBuyFast()}"
								v-if="style == 5">
								<view class="product-item-5"
									@click="gotoPage('/pages/product/detail/detail?productId=' + item.productId)"
									v-for="(item, index) in productlist" :key="index">
									<image class="product-image-2" :src="item.productImage" mode="aspectFit"></image>
									<view class="flex-1 d-c" style="height: 154rpx;">
										<view class="text-ellipsis-2 f28 gray3">{{ item.productName }}</view>
										<view class="theme-price f36 fb ww100 price-wrap">
											<view class="f26 orange tl">会员价：￥{{ item.productPrice }}</view>
											<view class="f26 green14854D tl">市场价：￥{{ item.linePrice}}</view>
											<template v-if="shoppingPrice && !item.seckill && isBuyFast()">
												<view class="add-shopping-wrap theme-bg"
													@click.stop="addShopping(item)">
													<view class="icon iconfont icon-icozhuanhuan"></view>
												</view>
											</template>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</template>
		</view>
		<!-- 结算弹窗 -->
		<categoryMaskVue ref="categoryMaskRef" :dataList="productArr" @get-shopping-num="getShoppingNum" />
		<!-- 快速结算 -->
		<template v-if="isBuyFast()">
			<view class="shopping d-b-c" id="shopping"
				:class="[{ customTabBar: isAuto == 1 },{H5:platFormType == 'web'}]">
				<view class="shopping-l d-s-c">
					<view class="shopping-circle" @click="lookProduct">
						<view class="shopping-icon icon iconfont icon-gouwuchefill"></view>
						<view class="shopping-num" v-if="shoppingNum && shoppingNum!=0">{{ shoppingNum }}</view>
					</view>
					<view class="shopping-price d-s-c">
						<view class="shopping-symbol">￥</view>
						<view>{{ shoppingPrice }}</view>
					</view>
				</view>
				<button class="shopping-r" @click="Submit">
					去结算
				</button>
			</view>
		</template>
		<view id="emptyShopping" v-if="isDomHeight && isAuto == 1"></view>
		<tabBar @get-footer-height="getFooterHeigth"></tabBar>
		<!--购物确定-->
		<spec :isPopup="isPopup" :productModel="productModel" @close="closePopup"></spec>
	</view>
</template>

<script>
	import spec from '@/pages/product/detail/popup/spec.vue';
	import categoryMaskVue from './categoryMask.vue';
	import throttle from "@/common/throttle.js";
	export default {
		components: {
			spec,
			categoryMaskVue,
		},
		data() {
			return {
				loading: true,
				searchName: '搜索课程',
				/*展示方式*/
				showType: 3,
				style: 1,
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*数据*/
				listData: [],
				/*子类数据*/
				childlist: [],
				/*当前选中的分类*/
				selectIndex: 0,
				catename: '',
				productlist: [],
				page: 1,
				categoryId: 0,
				tableData: [],
				isLogin: false,
				shoppingNum: 0,
				shoppingPrice: null,
				productModel: {},
				isPopup: false,
				specData: null,
				detail: null,
				isDomHeight: true,
				shoppingHeight: 0,
				searchHeight: 0,
				footerHeight: 0,
				productArr: [],
				isAuto: 0,
				platFormType: "",
				munData: [], //地址数据
				province: [],
				provinceIndex: '',
				city: [],
				cityIndex: '',
				area: [],
				areaIndex: '',
				scrollTop: 0, //分类滑动位置

			};
		},
		onLoad(e) {
			const platFormType = uni.getSystemInfoSync().uniPlatform
			this.platFormType = platFormType;
			console.log(this.platFormType, '平台类型') // app
			if (e.selectIndex) {
				this.selectIndex = e.selectIndex
				this.categoryId = e.categoryId
				this.scrollToIndex(e.selectIndex);
			}
		},
		onShow() {
			this.shoppingNum = 0;
			this.shoppingPrice = '0.00';
			this.getShoppingNum();
			let tabBarObj = uni.getStorageSync("TabBar");
			if (tabBarObj) {
				this.isAuto = tabBarObj.isAuto;
			}
			this.getTabBarLinks();
		},
		mounted() {
			this.getData();
			this.init();
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.productlist.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		/**
		 * 设置分享内容
		 */
		onShareAppMessage() {
			let self = this;
			return {
				title: self.templet.shareTitle,
				path: '/pages/product/category?' + self.getShareUrlParams()
			};
		},
		methods: {
			lookProduct() {
				this.$refs.categoryMaskRef.open();
			},
			isBuyFast() {
				if (this.isLogin) {
					if (this.isLogin && (this.showType == 10 && this.style == 4) || (this.showType == 20 && this.style ==
							3)) {
						this.scrollviewHigh = this.phoneHeight - this.searchHeight - this.shoppingHeight;
						return true
					}
				}
				this.scrollviewHigh = this.phoneHeight - this.searchHeight - this.footerHeight;
				return false
			},
			showTwo() {
				if (this.showType == 20 && (this.style == 2 || this.style == 3)) {
					return true
				}
				if (this.showType == 10 && this.style == 2) {
					return true
				}
				return false
			},
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select('#searchBox');
						view.boundingClientRect(data => {
							self.searchHeight = data.height || 0;
							console.log(self.searchHeight, "self.searchHeight")
						}).exec();
						let shoppingView = uni.createSelectorQuery().select('#emptyShopping');
						if (shoppingView) {
							shoppingView.boundingClientRect(data => {
								if (data && data.height) {
									self.shoppingHeight = data.height;
									console.log(self.shoppingHeight, "self.shoppingHeight")
								}
							}).exec();
						}

						self.isDomHeight = false;
					}
				});
			},
			//类型5初始化
			onWayshow() {
				let e = {};
				e.detail = {};
				e.detail.value = 17;
				this.provinceChange(e);
				e.detail.value = 12;
				this.cityChange(e);
				e.detail.value = 2;
				this.areaChange(e);
			},
			// 类型五 获取省市区
			getMunicipalities() {
				let self = this;
				self._post('settings/getRegion', {}, function(res) {
					uni.hideLoading()
					res.data[0].map((item) => {
						self.province.push(item.label);
					});
					self.munData = res.data
					self.onWayshow();
				});
			},
			//选择省
			provinceChange(e) {
				this.provinceIndex = e.detail.value
				this.city = [];
				this.munData[1].map((item, index) => {
					if (this.provinceIndex == index) {
						item.map((item2) => {
							this.city.push(item2.label);
						})
					}
				});
			},
			//选择市
			cityChange(e) {
				this.cityIndex = e.detail.value
				this.area = []
				this.munData[2].map((item, index) => {
					if (this.provinceIndex == index) {
						item.map((item2, index2) => {
							if (this.cityIndex == index2) {
								item2.map((item3) => {
									this.area.push(item3.label);
								})
							}
						})
					}
				});
			},
			//选择区
			areaChange(e) {
				this.areaIndex = e.detail.value
			},
			onShowt(index) {
				switch (index) {
					case 1:
						if (this.provinceIndex == '') {
							uni.showToast({
								title: '请先选择省区',
								icon: 'none'
							})
						}
						break;
					default:
						if (this.cityIndex == '') {
							uni.showToast({
								title: '请先选择市区',
								icon: 'none'
							})
						}
						break;
				}
			},
			getFooterHeigth(height) {
				this.footerHeight = height;
			},

			/*判断是否有图片*/
			hasImages(e) {
				if (e && e.imagePath != null) {
					return e.imagePath;
				} else {
					return '';
				}
			},

			/*获取数据*/
			getData() {
				let self = this;
				self.loading = true;
				self._get('product/category/index', {}, function(res) {
					self.loading = false;
					self.listData = res.data.list;
					let arr = {
						name: '全部',
						categoryId: 0
					}
					self.listData.unshift(arr);
					self.catename = self.listData[0].name;
					self.showType = res.data.template.categoryStyle;
					self.style = res.data.template.windStyle;
					if (self.style == 2) {
						self.categoryId;
						self.getProduct();
					} else if ((self.showType == 10 && self.style == 4 || self.style == 5) || (self.showType ==
							20 && self.style ==
							3)) {
						self.getProduct();
						if (self.style == 5) self.getMunicipalities();
						//self.getShoppingNum();
					}
					if (self.listData[0].children) {
						self.childlist = self.listData[0].children;
						self.changeCategory(self.childlist[0].categoryId);
					}
					self.background = res.data.background;
					self.$nextTick(() => {
						self.isBuyFast();
					})
				});
			},
			changeCategory(e) {
				this.categoryId = e;
				this.productlist = [];
				this.page = 1;
				this.getProduct();
			},
			/*去结算*/
			Submit() {
				let self = this;
				let arrIds = [];
				self.tableData.forEach(item => {
					item.productList.forEach(product => {
						arrIds.push(`${product.productId}_${product.specSkuId}`);
					});
				});
				if (arrIds.length == 0) {
					uni.showToast({
						title: '请选择课程',
						icon: 'none'
					});
					return false;
				}
				self.gotoPage('/pages/order/confirm-order?orderType=cart&cartIds=' + arrIds);
			},
			/* 获取购物车数量 */
			getShoppingNum() {
				let self = this;
				self._post('order/cart/cart', {}, function(res) {
					const {
						data: {
							productList
						}
					} = res;
					self.isLogin = false;
					if (productList) {
						self.isLogin = true;
						self.tableData = productList;
						let totalNum = 0;
						let totalPrice = 0;
						let productArr = [];
						if (productList && productList.length > 0) {
							productList.forEach((v) => {
								if (v.productList && v.productList.length > 0) {
									v.productList.forEach((item) => {
										productArr.push(item)
										totalNum = totalNum + item.totalNum;
										totalPrice = totalPrice + parseFloat(item.totalNum) *
											parseFloat(item.productPrice);
									})
								}
							})
						}
						self.productArr = productArr;
						self.shoppingNum = totalNum;
						self.shoppingPrice = totalPrice.toFixed(2);
					}
				});
			},
			/* 添加购物车初始化 */
			addShopping(item) {
				if (item.specType == 20) {
					this.getSpecData(item.productId);
				} else {
					this.addSingleSpec(item.productId);
				}
			},
			/* 单规格课程加入购物车 */
			addSingleSpec(productId) {
				let self = this;
				self._post(
					'order/cart/add', {
						productId: productId,
						totalNum: 1,
						specSkuId: 0
					},
					function(res) {
						self.getShoppingNum();
					}
				);
			},
			/* 获取多规格课程 */
			getSpecData(productId) {
				let self = this;
				self._get(
					'product/product/detail', {
						productId: productId,
					},
					function(res) {
						if (res.data.specData) {
							self.isPopup = false;
							self.detail = res.data.detail;
							self.specData = res.data.specData;
							self.initSpecData(res.data.specData);
						} else {
							uni.showToast({
								title: '暂无规格，请于后台添加!',
								mask: false,
								duration: 1500,
								icon: 'none',
							});
						}
					}
				);
			},
			/* 初始化规格弹窗 */
			initMaskPopup() {
				let obj = {
					specData: this.specData,
					detail: this.detail,
					productSpecArr: this.specData != null ? new Array(this.specData.specAttr.length) : [],
					showSku: {
						skuImage: '',
						price: 0,
						productSkuId: 0,
						linePrice: 0,
						stock: 0,
						sum: 1
					},
					plusSku: null,
					type: 'card',
					plusName: ''
				};
				this.productModel = obj;
				this.isPopup = true;
			},
			/*初始化多规格课程*/
			initSpecData(data) {
				for (let i in data.specAttr) {
					for (let j in data.specAttr[i].specItems) {
						data.specAttr[i].specItems[j].checked = false;
					}
				}
				this.specData = data;
				this.initMaskPopup();
			},
			closePopup() {
				this.isPopup = false;
				this.getShoppingNum();
			},
			getProduct() {
				let self = this;
				let page = self.page;
				let categoryId = self.categoryId;
				let sortType = self.sortType;
				let sortPrice = self.sortPrice;
				self.loading = true;
				uni.showLoading({
					title: '加载中'
				})
				self._postBody(
					'product/product/lists', {
						page: page || 1,
						categoryId,
						search: '',
						sortType: '',
						sortPrice: '',
						list_rows: 20
					},
					function(res) {
						uni.hideLoading();
						self.loading = false;
						self.productlist = self.productlist.concat(res.data.records); //课程
						self.lastPage = res.data.lastPage;
						if (res.data.lastPage <= 1) {
							self.no_more = true;
						}
					}
				);
			},
			/*选择分类*/
			selectCategory(e) {
				// uni.showLoading({
				// 	title: '加载中',
				// });
				// throttle(() => {
				// 	uni.hideLoading()
				if (this.showType == 10) {
					this.selectIndex = e;
					this.catename = this.listData[this.selectIndex].name;
					this.changeCategory(this.listData[this.selectIndex].categoryId);
				} else {
					if (this.listData[e].children) {
						this.childlist = this.listData[e].children;
						this.selectIndex = e;
						this.catename = this.listData[this.selectIndex].name;
						this.changeCategory(this.childlist[0].categoryId);
					}
				}
				// }, 1000)

				console.log('/pages/product/category?selectIndex=' + this.selectIndex + '&categoryId=' + this.categoryId);
				this.scrollToIndex(e);

			},
			hasSelect() {
				let self = this;
			},
			/*跳转产品列表*/
			gotoList(e) {
				let categoryId = e;
				let sortType = 'all';
				let search = '';
				let sortPrice = 0;
				this.gotoPage('/pages/product/list/list?categoryId=' + categoryId + '&sortType=' + sortType + '&search=' +
					search + '&sortPrice=' + sortPrice);
			},

			wxGetUserInfo: function(res) {
				if (!res.detail.iv) {
					uni.showToast({
						title: '您取消了授权,登录失败',
						icon: 'none'
					});
					return false;
				}
			},

			/*跳转搜索页面*/
			gotoSearch() {
				this.gotoPage('/pages/product/search/search');
			},
			scrollToIndex(index) {
				const scrollPosition = this.scrollviewHigh - (this.scrollviewHigh - index * 50);
				this.scrollTop = scrollPosition
			},

		}
	};
</script>

<style lang="scss">
	@import "@/common/mixin.scss";
	$footer-tabBar-height: 98rpx;
	$shopping-height: 96rpx;

	page {
		min-height: 0;
	}

	.foot_ {
		height: 98rpx;
		width: 100%;
	}

	.cotegory-type {
		line-height: 40rpx;
		background: #ffffff;
	}

	.cotegory-type image {
		width: 100%;
	}

	.cotegory-type-1 .list {
		padding: 20rpx;
	}

	.cotegory-type-1 .list .item {
		margin-top: 30rpx;
	}

	.cotegory-type-1 .list .item .pic {
		// border: 1px solid #e3e3e3;
		width: 710rpx;
		height: auto;
		overflow: hidden;
		border-radius: 8px;
	}

	.cotegory-type-1 .list .item image {
		width: 100%;
		height: 100%;
	}

	.cotegory-type-2 .list,
	.cotegory-type-3 .list {
		padding: 0 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.cotegory-type-2 .list .item,
	.cotegory-type-3 .list .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.cotegory-type-3 .list .item {
		width: 140rpx;
		height: 200rpx;
		margin-top: 40rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
	}

	.cotegory-type-2 .list .item {
		padding: 0 16rpx;
		width: 33.3%;
		margin: 0;
		margin-bottom: 16rpx;
		height: 300rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.cotegory-type-2 .list .item image {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.cotegory-type-3 {
		display: flex;
	}

	.cotegory-type-3 .category-tab {
		width: 200rpx;
		background: #ffffff;
		@include background_color("opacify_background_0");
		// border-right: 1px solid #e3e3e3;
	}

	.showShopping {
		padding-bottom: $shopping-height;
		box-sizing: border-box;
	}

	.cotegory-type-3 .category-tab .item {
		padding: 40rpx 0;
		font-size: 26rpx;
		text-align: center;
		color: #666666;
		font-weight: bold;
	}

	.cotegory-type-3 .category-tab .item.active {
		position: relative;
		background: #ffffff;

		color: #333333;
	}

	.cotegory-type-3 .category-tab .item.active::after {
		position: absolute;
		content: "";
		top: 40rpx;
		bottom: 40rpx;
		left: 0;
		width: 6rpx;
		height: 22rpx;
		margin: auto;
		@include background_linear("titleft1", "titleft2", 180deg, 0%, 100%);
	}

	.cotegory-type-3 .category-content {
		flex: 1;
		// padding: 0 20rpx;
	}

	.cotegory-type-3 .list .item:nth-child(3n) {
		margin-right: 0;
	}

	.cotegory-type-3 .list .item image {
		width: 140rpx;
		height: 140rpx;
	}

	.cotegory-type-3 .list .item .type-name {
		display: block;
		margin-top: 20rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-overflow: ellipsis;
		width: 100%;
		color: #818181;
		font-size: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-align: center;
	}

	.scroll-3 {
		position: absolute;
		background: #ffffff;
		border-radius: 12px;
	}

	.catename {
		padding-top: 10rpx;
		line-height: 60rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	.catescroll2-top {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 20rpx 0;
		padding-left: 20rpx;
	}

	.catescroll2-top-item {
		// min-width: 142rpx;
		padding: 0 23rpx;
		height: 58rpx;
		background: #f6f6f6;
		border: 1rpx solid #f6f6f6;
		border-radius: 29rpx;
		margin-right: 14rpx;
		line-height: 58rpx;
		color: #666;
		text-align: center;
		box-sizing: border-box;
		white-space: nowrap;
	}

	.catescroll2-top-item.active {
		color: #fff;
		@include background_color("background_color");
		border: 1rpx solid #ee252a;
		@include border_color("border_color");
	}

	.product-item-2:first-child {
		margin-top: 20rpx;
	}

	.product-item-2 {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 20rpx;
		margin-bottom: 25rpx;

		.product-image-2 {
			width: 194rpx;
			height: 194rpx;
			display: block;
			margin-right: 20rpx;
		}
	}

	.product-item-5 {
		width: 46%;
		margin: 0 11rpx;
		text-align: center;

		.product-image-2 {
			background: #CCCCCC;
			width: 240rpx;
			height: 240rpx;
			display: block;
			border-radius: 10rpx;
		}

		.text-ellipsis-2 {
			margin-top: 20rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			-webkit-line-clamp: 1;
			margin-bottom: 20rpx;
		}
	}

	.uni-scroll-view::-webkit-scrollbar,
	.catescroll2-top::-webkit-scrollbar {
		/*滚动条整体样式*/
		/*高宽分别对应横竖滚动条的尺寸*/
		display: block;
		width: 0rpx !important;
		height: 0rpx !important;
		-webkit-appearance: default-button;
	}

	.uni-scroll-view::-webkit-scrollbar-thumb,
	.catescroll2-top::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		background-color: #909399;
	}

	.uni-scroll-view::-webkit-scrollbar-track,
	.catescroll2-top::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #ededed;
		border-radius: 10px;
	}

	.price-wrap {
		position: relative;
		width: 100%;
	}

	.add-shopping-wrap {
		position: absolute;
		right: 0;
		top: 0;
		width: 48rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 50%;

		.icon {
			margin-left: 6rpx;
			color: #fff;
		}
	}

	#emptyShopping {
		width: 100%;
		height: $shopping-height;
		opacity: 0;
	}

	#footBottom {
		width: 100%;
		height: $footer-tabBar-height;
	}

	.shopping {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: $shopping-height;
		background: #FFFFFF;
		border-top: 1px solid #EEEEEE;
		padding: 0 34rpx;
		box-sizing: border-box;

		&.customTabBar {
			bottom: calc(env(safe-area-inset-bottom) + 98rpx);
		}

		&.H5 {
			bottom: calc(env(safe-area-inset-bottom) + 98rpx);
		}

		/* &.noH5:not(.customTabBar){
		bottom: 0;
	} */
		.shopping-l {
			.shopping-circle {
				width: 70rpx;
				height: 69rpx;
				line-height: 69rpx;
				background: #fff;
				border-radius: 50%;
				box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.4);
				position: relative;
			}

			.shopping-icon {
				@include font_color("font_color");
				//@include background_color("background_color");
				color: #E22319;
				font-size: 45rpx !important;
				text-align: center;
				margin-top: 3rpx;
			}

			.shopping-num {
				width: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				@include background_color("background_color");
				//background: #E22319;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 0;
				font-size: 23rpx;
				color: #fff;
			}

			.shopping-price {
				@include font_color("font_color");
				//color: #E22319;
				font-size: 36rpx;
				margin-left: 42rpx;
				font-weight: bold;

				.shopping-symbol {
					font-size: 22rpx;
				}
			}
		}

		.shopping-r {
			width: 178rpx;
			height: 62rpx;
			line-height: 62rpx;
			@include background_color("background_color");
			border-radius: 31rpx;
			color: #FFFFFF;
			font-size: 30rpx;
		}
	}

	.selectorTop {
		height: 180rpx;
		background: #FFFFFF;
		padding: 20rpx;
		font-family: PingFang SC;

	}

	.selectorTop .selectorBox {
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1px solid #E1E1E1;
		padding: 30rpx;

	}

	.selectorTop .selectorBox .selectorTitle {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.selectorBox-box {
		width: 160rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1px solid #E1E1E1;
		line-height: 64rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.searchStyle5 {
		background-color: #FFFF;
		padding: 20rpx 20rpx;
		height: 80rpx;

		.searchStyle5-flex {
			display: flex;
			align-items: center;
			background: #FFFFFF;
			border-radius: 50rpx;
			border: 1rpx solid #14854D;

			.icon-sousuo {
				color: #000;
				font-weight: bold;
				font-size: 36rpx;
				margin-left: 30rpx;
			}

			.ml10 {
				flex: 1;
				font-weight: 400;
				font-size: 28rpx;
				color: #CCCCCC;
			}

			.searchBot {
				width: 136rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #14854D;
				border-radius: 40rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}


	.style5Top {
		position: fixed;
		width: 100%;
		z-index: 10;
	}

	.category-wrap {
		height: 100vh;
		overflow-y: hidden;
	}
</style>